<template>
  <el-button @click="rsga">打开</el-button>
  <el-dialog v-model="centerDialogVisible" :fullscreen="isFullScreen" width="72%" append-to-body :show-close="false">
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <span :id="titleId" :class="titleClass">添加产品</span>
        <div class="header-buttons">
          <el-icon @click="toggleFullScreen" class="icon-button">
            <FullScreen v-if="!isFullScreen" /><CopyDocument v-else />
          </el-icon>
          <el-icon @click="CreateProductBillhandleClose" class="icon-button full-screen-btn"><Close /></el-icon>
        </div>
      </div>
    </template>

    <el-scrollbar :max-height="maxHeight + 'px'">
      <h1>哈哈</h1>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="CreateProductBillhandleClose">取消</el-button>
        <el-button type="primary" @click="CreateProductBillhandleClose"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElNotification, FormInstance } from 'element-plus'
const centerDialogVisible = ref(false)
const isFullScreen = ref(false)
// const CreateProductBillFormRef = ref<FormInstance>()

//展开添加产品窗口
const toggleFullScreen = () => {
  isFullScreen.value = !isFullScreen.value
  if (isFullScreen.value) {
    maxHeight.value = window.innerHeight * 0.8
  } else {
    maxHeight.value = window.innerHeight * 0.6
  }
}

const rsga = () => {
  centerDialogVisible.value = true
}

// 关闭创建产品对话框
const CreateProductBillhandleClose = () => {
  // const formEl = CreateProductBillFormRef.value
  // if (!formEl) return
  // formEl.resetFields()
  centerDialogVisible.value = false //添加对话框状态
  isFullScreen.value = false //添加对话框展开
}

// 创建一个响应式变量 maxHeight，初始值为屏幕高度的 80%
const maxHeight = ref(window.innerHeight * 0.6)

// 定义一个函数，用于更新 maxHeight 的值
const updateMaxHeight = () => {
  maxHeight.value = window.innerHeight * 0.6
  ElNotification({
    message: '' + window.innerHeight * 0.6,
    offset: 100,
    type: 'success',
    duration: 2000
  })
}

// 在组件挂载时添加一个事件监听器，监听窗口大小的变化
onMounted(() => {
  window.addEventListener('resize', updateMaxHeight)
})

// 在组件销毁前移除事件监听器，以防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateMaxHeight)
})
</script>

<style lang="less" scoped>
.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-buttons {
  display: flex;
  align-items: center;
}

.icon-button {
  margin-left: 10px;
  cursor: pointer;
}

.full-screen-btn {
  margin-left: 10px;
}
</style>


